window.addEventListener('load',function() {
  // 获取所以的页面
  var home_page=document.getElementById('home_page');
  var develop=document.getElementById('develop');
  // var supply_system=document.getElementById('supply_system');
  var client_case=document.getElementById('client_case');
  var APP_develop=document.getElementById('APP_develop');
  var about_us=document.getElementById('about_us');
 

  /*给每个设置aaa属性*/
  home_page.setAttribute('aaa','data-homepage');
  develop.setAttribute('aaa','data-develop');
  // supply_system.setAttribute('aaa','data-supply_system_btn')
  client_case.setAttribute('aaa','data-client_case');
  APP_develop.setAttribute('aaa','data-APP_develop');
  about_us.setAttribute('aaa','data-aboutus');

  // 获取每个页面并建立伪数组
  var page=document.querySelectorAll('div[aaa]');


  //拿到所有的按钮
  var btn_list=document.querySelector('header').querySelector('ul').querySelectorAll('.btn_nav');
 
  // var supply_system_btn=document.getElementById('supply_system_btn');
  // var header=document.getElementById('header');

  var i;
  // supply_system_btn.onclick=function() {
  //     header.style.display='none';
  // }   
  for(i=0;i<btn_list.length;i++) {
      btn_list[i].setAttribute('index',i);  /*设置自定义属性为 */
      btn_list[i].onclick=function() {
          for(var j=0;j<btn_list.length;j++) {
              btn_list[j].style.color='#888888';
              btn_list[j].style.borderBottom='none';
              page[j].style.display='none';
          }
          var index=this.getAttribute('index');  /*从自定义属性中拿到当前元素的序号*/
          page[index].style.display='block';
          this.style.color='#ff7852';
          this.style.borderBottom='2px solid #ff7852'
          
      }
  }


  //导航栏的定位
    var header=this.document.querySelector('.header-nav');
    var headerTop=header.offsetTop+header.offsetTop;
    this.document.addEventListener('scroll',function() {
       
        
        if(window.pageYOffset>headerTop) {
            header.style.position='fixed';
            header.style.top='0px';
            header.style.left='50%';
            header.style.transform='translateX(-50%)';
           
        }else {
            header.style.position='relative';
            header.style.left='50%';
            header.style.transform='translate:-50%';
            header.style.top='0px';
        }
    })


})